<template>
    <div class="activityCenterSidebar">
        <div class="activityCenterSidebarOne">
            <img src="./../../assets/img/myYC/myYCSidebarLogo.png" alt="">
            <p>活动中心</p>
        </div>
        <div :class="index == 1? 'activityCenterSidebarTwo activityCenterSidebarS':'activityCenterSidebarTwo'" @click="SelectSidebar(1)">全部活动</div>
        <div :class="index == 2? 'activityCenterSidebarThree activityCenterSidebarS':'activityCenterSidebarThree'" @click="SelectSidebar(2)">已报活动</div>
<!--        <div :class="index == 3? 'activityCenterSidebarFour activityCenterSidebarS':'activityCenterSidebarFour'" @click="SelectSidebar(3)">发布宝贝</div>-->
<!--        <div :class="index == 4? 'activityCenterSidebarFive activityCenterSidebarS':'activityCenterSidebarFive'" @click="SelectSidebar(4)">评价</div>-->
    </div>
</template>

<script>
    export default {
        name: "activityCenterSidebar",
        data(){
            return {
                // 控制侧边栏选中的是哪一个(1:全部活动)
                index:1,
            }
        },
        methods:{
            SelectSidebar(index){
                this.global.startLoading();
                this.index = index;
                switch(index) {
                    // 全部活动
                    case 1:
                        this.$router.push({ path:'/activityCenter'});
                        break;
                    // 已报活动
                    case 2:
                        this.$router.push({ path:'/myActivity'});
                        break;
                    // // 跳转发布宝贝页面
                    // case 3:
                    //     this.$router.push({ path:'/myStoreInfo'});
                    //     break;
                    // // 跳转评价
                    // case 4:
                    //     this.$router.push({ path:'/myGoodsReviews'});
                    //     break;
                    default:

                }
                this.global.endLoading();
            },
            // 设置可以监听路由name的函数,保持页面状态
            watchRoute(routeName){
                // 获取当前路由name,改变侧边栏选中选项
                switch(routeName) {
                    // 全部活动
                    case "allActivity":
                        this.index = 1;
                        break;
                    // 已报活动
                    case "myActivity":
                        this.index = 2;
                        break;
                    // // 店铺基础信息
                    // case "myStoreInfo":
                    //     this.index = 3;
                    //     break;
                    // // 评价
                    // case "myGoodsReviews":
                    //     this.index = 4;
                    //     break;
                    default:
                }
            }
        },
        watch:{
            // 监听路由name
            $route(to,from){
                console.log(this.$route.name);
                this.watchRoute(this.$route.name);
            }
        },
        mounted(){
            // 刷新页面保持状态
            this.watchRoute(this.$route.name);
        }
    }
</script>

<style scoped>
    .activityCenterSidebar{
        width:165px;
        height:808px;
        background:rgba(255,255,255,1);
        text-align: center;
    }
    .activityCenterSidebarOne{
        margin-bottom: 40px;
    }
    .activityCenterSidebarOne img{
        margin: 20px auto 10px;
    }
    .activityCenterSidebarOne p{
        font-size: 17px;
        font-weight: 400;
        color: #333333;
    }
    .activityCenterSidebarTwo,
    .activityCenterSidebarThree,
    .activityCenterSidebarFour,
    .activityCenterSidebarFive{
        width:159px;
        height:57px;
        font-size:15px;
        font-weight:800;
        color:rgba(0,0,0,1);
        line-height: 57px;
        border-left: 6px solid #FFFFFF;
        margin-bottom: 15px;
        cursor: pointer;
    }
    .activityCenterSidebarS{
        color: #FB6451;
        background:#fee0dc;
        border-left: 6px solid #fb6451;
    }
</style>